import React, { PureComponent } from 'react';
import { Grid, Flex } from 'antd-mobile';
import { homeFunctionBlock } from './HomeFunctionBlock.less';
import Img from '../../components/Img/Img';
import {routerRedux} from "dva/router";
import {connect} from "dva";

class HomeFunctionBlock extends PureComponent {
  onClick = (el, index) => {
    switch (el.actionType) {
      case "coupon":
          this.props.dispatch(routerRedux.push({
              pathname: `/couponList/${0}`,
          })); // 优惠券
        break;
      case "distributor":
          this.props.dispatch(routerRedux.push({pathname:`/distribution`})) // 分销
        break;
        case "seckill":
            this.props.dispatch(routerRedux.push({pathname: `/seckill/${1}`})); // 秒杀
            break;
        case "xianshiqiang":
            this.props.dispatch(routerRedux.push({pathname: `/timeBuy/${1}`})); // 限时抢购
            break;
        case "group":
            this.props.dispatch(routerRedux.push({pathname: `/shopOpenGroup`})); // 拼团
            break;
    }
  }


  renderItem = (dataItem, index) => {
    return (
          <Flex direction="column" justify="center">
              <div className={`item`} style={{ textAlign: 'center', width: '100%', height: '0.8rem' }}>
                <Img src={dataItem.icon} style={{height: '0.8rem'}}/>
              </div>
              <div style={{ textAlign: 'center', marginLeft: '0', fontSize: '0.22rem', height: '0.26rem', marginTop: '0.1rem' }}>
                <div style={{ height: '0.24em', color:"#999" }}>{dataItem.name}</div>
              </div>
          </Flex>
    );
  }

  render() {
    const { menuList } =this.props;
    /*const url = common.SERVER_DOMAIN;*/
    // const data = [{
    //   text: `分类`,
    // }, {
    //   text: `直播`,
    // }, {
    //   text: `推广产品`,
    // }, {
    //   text: `关注商品`,
    // }, {
    //   text: `关注店铺`,
    // }, {
    //   text: `积分商城`,
    // }, {
    //   text: `最热活动`,
    // }, {
    //   text: `圈子`,
    // }, {
    //   text: `资讯`,
    // }, {
    //   text: `浏览记录`,
    // },
    // ];

    return (
      <div className={homeFunctionBlock}>
        <Grid
          data={menuList}
          columnNum={4}
          hasLine={false}
          onClick={this.onClick}
          renderItem={this.renderItem}
        />
      </div>
    );
  }
}
export default connect (({ home}) => ({ home })) ( HomeFunctionBlock);
